<template>
  <div>
    <h3>{{ props.title }}</h3>
    <table class="table">
      <thead>
        <tr class="table-header">
          <th
            v-for="(column,index) in props.options"
            :key="index"
            :style="{
              width: column.width
            }"
          >
            {{ column.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
            class="table-line"
          v-for="(item,i) in props.data"
          :key="i"
        >
          <td
            v-for="(column,index) in props.options"
            :key="index"
            :style="{
              width: column.width
            }"
          >
            {{ item[column.prop] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
defineOptions({
  name: "Table",
  inheritAttrs: false,
})

const props = defineProps({
  title: {
    type: String,
  },
  data: {
    type: Array,
    default: () => []
  },
  options: {
    type: Array,
    default: () => []
  }
})
</script>

<style scoped>
.table {
  width: 100%;
  border: 1px solid #cccccc;
}
.table-header {
  background-color: #cccccc;
}
.table-header th {
  padding: 5px 10px;
}
.table-line {
  font-weight: 300;
  text-align: center;
}
.table-line td {
  border: 1px solid #cccccc;
  padding: 5px 10px;
}
</style>